<template>
  <div class="edit-channel">
    <van-cell size="large" class="my-cell">
      <span slot="title" class="left-title">编辑频道</span>
      <van-button @click="isEdit=!isEdit" round color="#7232dd" plain slot="default" size="mini" type="default">
        {{isEdit?'完成':'编辑'}}</van-button>
    </van-cell>
    <van-grid class="list-grid my-grid" :gutter="10">
      <van-grid-item :class="{active:index===activeIndex}" v-for="(item,index) in channels" :key="item.id"
        :icon="(isEdit&&index!==0)?'close':''" :text="item.name" @click="channelClick(index,item.id)" />
    </van-grid>

    <van-cell :border="false" size="large" class="recommend-cell">
      <span slot="title" class="left-title">推荐频道</span>
    </van-cell>
    <van-grid class="list-grid recommend-grid" :gutter="10" direction="horizontal">
      <van-grid-item v-for="item in recommendChannel" @click="recommendClick(item)" :key="item.id" icon="plus"
        :text="item.name" />
    </van-grid>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
import { loadChannelList, setChannelList, delChannel } from '@/api/channel.js'
const HTTT_CHANNEL = 'hmtt_channel'
export default {
  name: 'channel-item',
  data () {
    return {
      allchannels: [],
      isEdit: false
    }
  },
  props: {
    channels: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      required: true
    }
  },
  methods: {
    channelClick (index, id) {
      if (this.isEdit) {
        if (index === 0) return
        if (index <= this.activeIndex) {
          this.$emit('sendData', {
            close: true,
            index: this.activeIndex - 1
          })
        }
        this.channels.splice(index, 1)
        this.deleteChannelStorage(id)
      } else {
        this.$emit('sendData', {
          close: false,
          index
        })
      }
    },
    async deleteChannelStorage (id) {
      if (this.user) {
        try {
          await delChannel(id)
          this.$toast.success('删除成功')
        } catch (err) {
          this.$toast('删除失败')
        }
      } else {
        setItem(HTTT_CHANNEL, this.channels)
      }
    },
    async recommendClick (item) {
      this.channels.push(item)
      if (this.user) {
        try {
          await setChannelList({
            id: item.id,
            seq: this.channels.length
          })
          this.$toast.success('添加成功')
        } catch (err) {
          this.$toast('添加失败')
        }
      } else {
        setItem(HTTT_CHANNEL, this.channels)
      }
    },
    async loadChannels () {
      try {
        const { data: res } = await loadChannelList()
        this.allchannels = res.data.channels
      } catch (err) {
        this.$toast('获取频道失败')
      }
    }
  },
  computed: {
    ...mapState(['user']),
    recommendChannel () {
      return this.allchannels.filter(item => {
        return !this.channels.find(channelItem => item.id === channelItem.id)
      })
    }
  },
  watch: {},
  filters: {},
  components: {},
  created () {
    this.loadChannels()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
/deep/ .my-grid {
  .van-grid-item__icon + .van-grid-item__text {
    margin-top: 0px;
  }
  .van-icon-close {
    position: absolute;
    font-size: 34px;
    right: -13px;
    top: -13px;
  }
  .active {
    .van-grid-item__text {
      color: red;
    }
  }
}
.recommend-cell {
  .left-title {
    font-size: 32px;
    color: #333333;
  }
}
.edit-channel {
  padding-top: 70px;
  .my-cell {
    align-items: center;
    &::after {
      border: none;
    }
    .left-title {
      font-size: 32px;
      color: #333333;
    }
    .van-button--default {
      padding: 5px 20px;
    }
  }

  /deep/ .list-grid {
    .van-grid-item {
      height: 86px;
      .van-grid-item__content {
        background-color: #f4f5f6;
        border-radius: 6px;
        &::after {
          border: none;
        }
      }
    }
  }

  /deep/ .recommend-grid {
    .van-grid-item__icon {
      font-size: 24px;
    }
  }
}
</style>
